<template>
  <div class="suspicious-call-analysis">
    <div class="page-header">
      <h1>可疑通话分析</h1>
      <p>智能检测和分析可疑通话内容</p>
    </div>

    <div class="main-content">
      <!-- 上传分析区域 -->
      <div class="upload-section">
        <h2>通话录音上传</h2>
        <div class="upload-area" @drop="handleDrop" @dragover.prevent>
          <div class="upload-icon">
            <i class="fas fa-cloud-upload-alt"></i>
          </div>
          <p>拖拽录音文件到此处或点击上传</p>
          <input type="file" ref="fileInput" @change="handleFileSelect" accept="audio/*" hidden>
          <button class="btn btn-primary" @click="$refs.fileInput.click()">
            选择文件
          </button>
        </div>

        <!-- 文件信息 -->
        <div v-if="uploadedFile" class="file-info">
          <div class="file-item">
            <i class="fas fa-file-audio"></i>
            <span class="file-name">{{ uploadedFile.name }}</span>
            <span class="file-size">{{ formatFileSize(uploadedFile.size) }}</span>
            <button class="btn-remove" @click="removeFile">×</button>
          </div>
        </div>

        <!-- 分析按钮 -->
        <div class="analysis-controls">
          <button 
            class="btn btn-analyze" 
            @click="startAnalysis"
            :disabled="!uploadedFile || isAnalyzing"
          >
            {{ isAnalyzing ? '分析中...' : '开始分析' }}
          </button>
        </div>
      </div>

      <!-- 分析结果 -->
      <div v-if="analysisResult" class="analysis-results">
        <h2>分析结果</h2>
        
        <!-- 风险评估 -->
        <div class="risk-assessment">
          <h3>风险评估</h3>
          <div class="risk-score">
            <div class="score-circle" :class="getRiskClass(analysisResult.riskScore)">
              <span class="score-value">{{ analysisResult.riskScore }}</span>
              <span class="score-label">风险分</span>
            </div>
            <div class="risk-info">
              <div class="risk-level">
                <span class="label">风险等级：</span>
                <span class="value" :class="analysisResult.riskLevel">
                  {{ analysisResult.riskLevelText }}
                </span>
              </div>
              <div class="fraud-type">
                <span class="label">诈骗类型：</span>
                <span class="value">{{ analysisResult.fraudType }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分析详情 -->
        <div class="analysis-details">
          <h3>分析详情</h3>
          <div class="detail-tabs">
            <button 
              v-for="tab in analysisResult.tabs" 
              :key="tab.id"
              class="tab-button"
              :class="{active: activeTab === tab.id}"
              @click="activeTab = tab.id"
            >
              {{ tab.name }}
            </button>
          </div>
          
          <div class="tab-content">
            <div v-if="activeTab === 'voice'" class="voice-analysis">
              <div class="analysis-item">
                <h4>声音特征</h4>
                <div class="feature-list">
                  <div class="feature-item">
                    <span class="feature-name">语速</span>
                    <div class="feature-bar">
                      <div class="feature-fill" :style="{width: '75%'}"></div>
                    </div>
                    <span class="feature-value">偏快</span>
                  </div>
                  <div class="feature-item">
                    <span class="feature-name">音调</span>
                    <div class="feature-bar">
                      <div class="feature-fill" :style="{width: '60%'}"></div>
                    </div>
                    <span class="feature-value">正常</span>
                  </div>
                  <div class="feature-item">
                    <span class="feature-name">情绪</span>
                    <div class="feature-bar">
                      <div class="feature-fill" :style="{width: '85%'}"></div>
                    </div>
                    <span class="feature-value">紧张</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="activeTab === 'content'" class="content-analysis">
              <div class="analysis-item">
                <h4>内容特征</h4>
                <div class="content-features">
                  <div class="feature-tag" v-for="feature in analysisResult.contentFeatures" :key="feature">
                    {{ feature }}
                  </div>
                </div>
              </div>
            </div>

            <div v-if="activeTab === 'pattern'" class="pattern-analysis">
              <div class="analysis-item">
                <h4>行为模式</h4>
                <div class="pattern-list">
                  <div class="pattern-item" v-for="pattern in analysisResult.patterns" :key="pattern.id">
                    <div class="pattern-icon">
                      <i :class="pattern.icon"></i>
                    </div>
                    <div class="pattern-info">
                      <h5>{{ pattern.name }}</h5>
                      <p>{{ pattern.description }}</p>
                    </div>
                    <div class="pattern-score">
                      <span class="score">{{ pattern.score }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 建议措施 -->
        <div class="suggestions">
          <h3>建议措施</h3>
          <div class="suggestion-list">
            <div class="suggestion-item" v-for="suggestion in analysisResult.suggestions" :key="suggestion.id">
              <div class="suggestion-icon">
                <i :class="suggestion.icon"></i>
              </div>
              <div class="suggestion-content">
                <h4>{{ suggestion.title }}</h4>
                <p>{{ suggestion.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="result-actions">
          <button class="btn btn-primary" @click="saveAnalysis">保存分析</button>
          <button class="btn btn-secondary" @click="exportReport">导出报告</button>
          <button class="btn btn-warning" @click="reportFraud">举报诈骗</button>
        </div>
      </div>
    </div>

    <!-- 分析历史 -->
    <div class="history-section">
      <h2>分析历史</h2>
      <div class="history-list">
        <div class="history-item" v-for="record in analysisHistory" :key="record.id">
          <div class="history-info">
            <h4>{{ record.fileName }}</h4>
            <p>{{ formatDateTime(record.timestamp) }}</p>
          </div>
          <div class="history-risk">
            <span class="risk-badge" :class="record.riskLevel">
              {{ record.riskLevelText }}
            </span>
            <span class="risk-score">{{ record.riskScore }}分</span>
          </div>
          <div class="history-actions">
            <button class="btn btn-sm" @click="viewHistory(record)">查看</button>
            <button class="btn btn-sm" @click="deleteHistory(record.id)">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const uploadedFile = ref(null)
const isAnalyzing = ref(false)
const analysisResult = ref(null)
const activeTab = ref('voice')

// 文件上传
const fileInput = ref(null)

// 分析历史
const analysisHistory = ref([
  {
    id: 1,
    fileName: '可疑通话_001.mp3',
    timestamp: '2024-01-20 14:30:25',
    riskScore: 85,
    riskLevel: 'high',
    riskLevelText: '高风险'
  },
  {
    id: 2,
    fileName: '可疑通话_002.mp3',
    timestamp: '2024-01-19 16:45:12',
    riskScore: 65,
    riskLevel: 'medium',
    riskLevelText: '中风险'
  },
  {
    id: 3,
    fileName: '可疑通话_003.mp3',
    timestamp: '2024-01-18 11:20:45',
    riskScore: 35,
    riskLevel: 'low',
    riskLevelText: '低风险'
  }
])

// 方法
const handleDrop = (e) => {
  e.preventDefault()
  const files = e.dataTransfer.files
  if (files.length > 0) {
    uploadedFile.value = files[0]
  }
}

const handleFileSelect = (e) => {
  const files = e.target.files
  if (files.length > 0) {
    uploadedFile.value = files[0]
  }
}

const removeFile = () => {
  uploadedFile.value = null
  analysisResult.value = null
}

const startAnalysis = () => {
  if (!uploadedFile.value) return
  
  isAnalyzing.value = true
  
  // 模拟分析过程
  setTimeout(() => {
    analysisResult.value = {
      riskScore: Math.floor(Math.random() * 50) + 50,
      riskLevel: 'high',
      riskLevelText: '高风险',
      fraudType: '电信诈骗',
      tabs: [
        { id: 'voice', name: '语音分析' },
        { id: 'content', name: '内容分析' },
        { id: 'pattern', name: '行为模式' }
      ],
      contentFeatures: ['紧急转账', '虚假身份', '恐吓威胁', '时间限制'],
      patterns: [
        {
          id: 1,
          name: '身份伪造',
          description: '冒充公检法人员',
          score: 90,
          icon: 'fas fa-user-secret'
        },
        {
          id: 2,
          name: '心理恐吓',
          description: '使用威胁恐吓语言',
          score: 85,
          icon: 'fas fa-exclamation-triangle'
        },
        {
          id: 3,
          name: '急迫催促',
          description: '要求立即行动',
          score: 80,
          icon: 'fas fa-clock'
        }
      ],
      suggestions: [
        {
          id: 1,
          title: '立即停止通话',
          description: '遇到此类通话应立即挂断',
          icon: 'fas fa-phone-slash'
        },
        {
          id: 2,
          title: '核实身份',
          description: '通过官方渠道核实对方身份',
          icon: 'fas fa-shield-alt'
        },
        {
          id: 3,
          title: '保存证据',
          description: '保留通话录音作为证据',
          icon: 'fas fa-save'
        }
      ]
    }
    isAnalyzing.value = false
  }, 3000)
}

const saveAnalysis = () => {
  if (!analysisResult.value) return
  
  const newRecord = {
    id: Date.now(),
    fileName: uploadedFile.value.name,
    timestamp: new Date().toISOString(),
    riskScore: analysisResult.value.riskScore,
    riskLevel: analysisResult.value.riskLevel,
    riskLevelText: analysisResult.value.riskLevelText
  }
  
  analysisHistory.value.unshift(newRecord)
  alert('分析结果已保存')
}

const exportReport = () => {
  alert('导出报告功能')
}

const reportFraud = () => {
  alert('举报诈骗功能')
}

const viewHistory = (record) => {
  alert(`查看历史记录: ${record.fileName}`)
}

const deleteHistory = (id) => {
  if (confirm('确定要删除这个分析记录吗？')) {
    analysisHistory.value = analysisHistory.value.filter(r => r.id !== id)
  }
}

const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleString()
}

const getRiskClass = (score) => {
  if (score >= 70) return 'high'
  if (score >= 40) return 'medium'
  return 'low'
}

onMounted(() => {
  // 初始化
})
</script>

<style scoped>
.suspicious-call-analysis {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

.upload-section {
  background: white;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.upload-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  transition: border-color 0.3s ease;
}

.upload-area:hover {
  border-color: #1e3c72;
}

.upload-icon {
  font-size: 48px;
  color: #1e3c72;
  margin-bottom: 15px;
}

.file-info {
  margin-top: 20px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.file-item i {
  color: #1e3c72;
  font-size: 20px;
}

.file-name {
  flex: 1;
  font-weight: 500;
}

.file-size {
  color: #666;
  font-size: 14px;
}

.btn-remove {
  background: #dc3545;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.analysis-controls {
  margin-top: 20px;
  text-align: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-analyze {
  background: #28a745;
  color: white;
  padding: 12px 30px;
  font-size: 16px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.analysis-results {
  background: white;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.analysis-results h2 {
  color: #1e3c72;
  margin-bottom: 30px;
}

.risk-assessment {
  margin-bottom: 30px;
}

.risk-assessment h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.risk-score {
  display: flex;
  align-items: center;
  gap: 30px;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.score-circle.high {
  background: #dc3545;
}

.score-circle.medium {
  background: #ffc107;
}

.score-circle.low {
  background: #28a745;
}

.score-value {
  font-size: 28px;
  margin-bottom: 5px;
}

.score-label {
  font-size: 14px;
}

.risk-info {
  flex: 1;
}

.risk-level, .fraud-type {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.risk-level .label, .fraud-type .label {
  min-width: 100px;
  color: #666;
}

.risk-level .value.high {
  color: #dc3545;
}

.risk-level .value.medium {
  color: #ffc107;
}

.risk-level .value.low {
  color: #28a745;
}

.analysis-details {
  margin-bottom: 30px;
}

.analysis-details h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.detail-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab-button {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-button.active {
  color: #1e3c72;
  border-bottom-color: #1e3c72;
}

.feature-list {
  space-y: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.feature-name {
  min-width: 80px;
  color: #666;
}

.feature-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.feature-fill {
  height: 100%;
  background: #1e3c72;
  transition: width 0.3s ease;
}

.feature-value {
  min-width: 60px;
  color: #1e3c72;
  font-weight: 500;
}

.content-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tag {
  background: #dc3545;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.pattern-list {
  space-y: 15px;
}

.pattern-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 15px;
}

.pattern-icon {
  width: 40px;
  height: 40px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pattern-info {
  flex: 1;
}

.pattern-info h5 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.pattern-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.pattern-score .score {
  color: #dc3545;
  font-weight: bold;
}

.suggestions {
  margin-bottom: 30px;
}

.suggestions h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.suggestion-list {
  space-y: 15px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 15px;
}

.suggestion-icon {
  width: 40px;
  height: 40px;
  background: #28a745;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-content h4 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.suggestion-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.result-actions {
  display: flex;
  gap: 15px;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.history-section {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.history-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.history-list {
  space-y: 15px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 15px;
}

.history-info {
  flex: 1;
}

.history-info h4 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.history-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.history-risk {
  display: flex;
  align-items: center;
  gap: 10px;
}

.risk-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.risk-badge.high {
  background: #f8d7da;
  color: #721c24;
}

.risk-badge.medium {
  background: #fff3cd;
  color: #856404;
}

.risk-badge.low {
  background: #d4edda;
  color: #155724;
}

.risk-score {
  color: #1e3c72;
  font-weight: bold;
}

.history-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .risk-score {
    flex-direction: column;
    text-align: center;
  }
  
  .detail-tabs {
    flex-wrap: wrap;
  }
  
  .feature-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pattern-item {
    flex-direction: column;
    text-align: center;
  }
  
  .suggestion-item {
    flex-direction: column;
    text-align: center;
  }
  
  .history-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .result-actions {
    flex-direction: column;
  }
}
</style> 